<script setup lang="ts" name="IndexView">
import { onBeforeUnmount, ref } from 'vue';
import { createFnTapMarker, getRoutePlanning, mapModel, polygonWithCenterIn } from './map'; // 地图逻辑
import type {
    OlMapInstanceType
} from '@/components/ui/OlMap';
import { headerModel } from './header'; // 头部组件逻辑
import { left1Model, getLeft1Data } from './left1';
import { left2Model, right1Model, getLeft2Data } from './left2AndRight1';
import { parseTime } from '@/utils/index';
import OlMap from '@/components/ui/OlMap';
import DynamicTable from '@/components/ui/DynamicTable/index.vue';
import StatusContainer from '@/components/ui/StatusContainer.vue';
import CustomChart from '@/components/ui/CustomChart/index.vue';
getRoutePlanning();
getLeft1Data();
getLeft2Data();

// ref用于获取组件或dom元素的引用时，必须和所引用的template放在一起，否则获取不到，所以这里获取mapView然后传给./map里的createFnTapMarker生成事件函数tapMarker
const mapView = ref<OlMapInstanceType | null>(null);
const tapMarker = createFnTapMarker(mapView);

const timer = window.setInterval(() => {
    headerModel.time = Date.now();
}, 1000);
onBeforeUnmount(() => {
    window.clearInterval(timer);
});
</script>

<template>
    <div class="page-container">
        <div class="header-box">
            <div class="fx1 f16 c-white">{{ parseTime(headerModel.time) }}</div>
            <div class="fx1 tac f36 c-white">{{ headerModel.title }}</div>
            <div class="fx1 tar f16 c-white">{{ headerModel.user }}</div>
        </div>
        <!-- 地图 -->
        <div class="map-box">
            <OlMap
                ref="mapView"
                :mapType="mapModel.type"
                :location="mapModel.location"
                :polygonsData="mapModel.polygonsData"
                :markersData="mapModel.markersData"
                :polylinesData="mapModel.paths"
                @featureWithCenterIn="polygonWithCenterIn"
                @tapMarker="tapMarker"
            ></OlMap>
            <div class="tool-box">
                <div
                    class="item f16 c-white mr20"
                    @click.stop="() => (mapModel.type = 1)"
                >
                    平面图
                </div>
                <div
                    class="item f16 c-white"
                    @click.stop="() => (mapModel.type = 2)"
                >
                    卫星图
                </div>
            </div>
        </div>

        <div class="left-box">
            <div class="c-white mb10 f20">左侧标题1</div>
            <div class="left1-box mb10">
                <StatusContainer
                    :isLoading="left1Model.isLoading"
                    :isEmpty="left1Model.dataList.length === 0"
                >
                    <DynamicTable
                        :columns="left1Model.columns"
                        :data-list="left1Model.dataList"
                    >
                        <template v-slot:excute>
                            <div>处理</div>
                        </template>
                    </DynamicTable>
                </StatusContainer>
            </div>
            <div class="c-white mb10 f20">左侧标题2-上下结构饼图</div>
            <CustomChart
                class="left2-box"
                :datasetSource="left2Model.datasetSource"
                :extraOption="left2Model.option"
                :legendShowPercent="true"
            ></CustomChart>
        </div>

        <div class="right-box">
            <div class="c-white mb10 f20">右侧标题1-左右结构饼图</div>
            <CustomChart
                class="right1-box"
                :datasetSource="right1Model.datasetSource"
                :extraOption="right1Model.option"
            ></CustomChart>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.page-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .header-box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: vh(80);
        width: 100%;
        background: #0000ff;
        padding: 0 vh(20);
    }
    .map-box {
        width: 100%;
        flex: 1;
        .tool-box {
            position: fixed;
            left: calc(vh(40) + vw(400));
            top: vh(120);
            display: flex;
            flex-direction: row;
            .item {
                padding: vh(6) vh(12);
                background: red;
                cursor: pointer;
            }
        }
    }
    .left-box {
        position: fixed;
        left: vh(20);
        top: vh(120);
        width: vw(400);
        min-height: vh(700);
        background: rgba(0, 0, 255, 0.7);
        padding: vh(10);
        .left1-box {
            height: vh(300);
        }
        .left2-box {
            height: vh(300);
        }
    }
    .right-box {
        position: fixed;
        right: vh(20);
        top: vh(120);
        width: vw(400);
        height: vh(700);
        background: rgba(0, 0, 255, 0.7);
        padding: vh(10);
        .right1-box {
            height: vh(180);
        }
    }
}
</style>
